<template>
  <div class="ques-list">
    <el-row class="ques-head">
      <el-col :span="2">ID</el-col>
      <el-col :span="10">标题</el-col>
      <el-col :span="4">提交者</el-col>
      <el-col :span="4">提交时间</el-col>
      <el-col :span="4">操作</el-col>
    </el-row>
    <div v-if="asks.length === 0 ">
      <el-empty description="题目列表为空"></el-empty>
    </div>
    <div v-else v-for="a in asks" :key="a.id">
      <div class="ques-row">
        <el-row style="display: flex;align-items: center">
          <el-col :span="2">{{a.id}}</el-col>
          <el-col :span="10">{{a.title}}</el-col>
          <el-col :span="4">{{a.nickname}}</el-col>
          <el-col :span="4">{{new Date(a.time * 1000).toLocaleString()}}</el-col>
          <el-col :span="4">
            <el-tooltip placement="bottom" content="查看详情">
              <router-link :to="`/ask/${a.id}`" target="_blank">
                <el-icon class="m-manage-icon"><info-filled /></el-icon>
              </router-link>
            </el-tooltip>
            &nbsp;&nbsp;
            <el-tooltip placement="bottom" content="删除">
              <el-icon class="m-manage-icon cpt" @click="delAsk(a.id,a.title)"><delete /></el-icon>
            </el-tooltip>
            &nbsp;&nbsp;
            <el-tooltip placement="bottom" content="编辑">
              <el-icon class="m-manage-icon cpt" @click="editAsk(a.id)"><edit /></el-icon>
            </el-tooltip>
            &nbsp;&nbsp;
            <el-tooltip placement="bottom" content="解答列表">
              <el-icon class="m-manage-icon cpt" @click="showReplies(a.id)"><notebook /></el-icon>
            </el-tooltip>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
  <el-dialog v-model="modalVisible" title="修改提问" :before-close="onCloseModal">
    <el-form :model="saveData" label-width="80px">
      <el-form-item label="问题标题">
        <el-input v-model="saveData.title" />
      </el-form-item>
      <el-form-item label="问题详情">
        <el-input v-model="saveData.content" type="textarea" autosize/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog v-model="replyModalVisible" title="回答管理" width="80%">
    <ReplyManage v-if="replyModalVisible" :askId="nowAid"/>
  </el-dialog>
</template>

<script>
import {Ask} from "../../utils/http/ask";
import {InfoFilled,Delete,Edit,Notebook} from "@element-plus/icons";
import {ElMessageBox} from "element-plus";
import {toRaw} from "@vue/reactivity";

export default {
  name: "AskManage",
  components:{
    InfoFilled,Delete,Edit,Notebook
  },
  data:function (){
    return{
      asks : [],
      modalVisible : false,
      saveData : null,
      replyModalVisible : false,
      nowAid : 0
    }
  },
  methods:{
    async getAllAsk(){
      let resp = await Ask.getAllAsk()
      if (resp.success){
        this.asks = resp.data.asks
      }
    },
    delAsk(id,name){
      ElMessageBox.confirm(
        '确定要删除提问 '+name+' 吗',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(async () => {
          let resp = await Ask.removeAsk(id)
          if (resp.success){
            this.$success("删除成功")
            this.getAllAsk()
          }else {
            this.$error("删除失败 ： "+resp.message)
          }
        })
        .catch(()=>{})
    },
    async editAsk(id){
      let resp = await Ask.getAskById(id)
      this.saveData = resp.data;
      this.modalVisible = true
    },
    onCloseModal(done){
      ElMessageBox.confirm(
        '您的修改尚未保存，确认关闭？',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          done()
        })
        .catch(()=>{})
    },
    async onSubmit(){
      let resp = await Ask.editAsk(toRaw(this.saveData))
      if (resp.success){
        this.$success("修改成功")
        this.modalVisible = false
        this.getAllAsk()
      }else {
        this.$error("修改失败："+resp.message)
      }
    },
    showReplies(id){
      this.nowAid = id
      this.replyModalVisible = true
    }
  },
  mounted() {
    this.getAllAsk()
  }
}
</script>

<style scoped>

.ques-head{
  color: black;
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  border-top: 1px solid #f1f1f1;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12);
}

.ques-row{
  padding: 10px 0;
}
.ques-row:hover{
  background: #eee;
}

.m-manage-icon {
  font-size: 20px;
  color: #53a8ff;
}

.cpt {
  cursor: pointer;
}
</style>
